<template>
  <div class="page-list-live">
    <div class="sc-page-list">
      <header class="sc-page-list-header">环境监测</header>
      <el-form ref="query" :model="query" label-position="right" label-width="68px" inline>
        <el-form-item label="时间">
          <el-date-picker
            v-model="query.logTime"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="float: right;margin-right: 0;">
          <div style="display: flex;">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-radio-group v-model="minute" style="position: absolute;margin-left: 30px;z-index: 1;">
        <el-radio-button :label="1">1M</el-radio-button>
        <el-radio-button :label="5">5M</el-radio-button>
        <el-radio-button :label="30">30M</el-radio-button>
        <el-radio-button :label="60">1H</el-radio-button>
        <el-radio-button :label="1440">24H</el-radio-button>
      </el-radio-group>
      <macarons id="environmentalEcharts" :minute="minute" :series="seriesEcharts"></macarons>
      <el-button icon="el-icon-delete" type="danger" :disabled="!multipleSelection.length" @click="batchDeletion">批量删除</el-button>
      <el-table :data="tableData" border center style="width: 100%;margin: 20px 0;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column prop="deviceName" align="center" label="设备名称" min-width="120"></el-table-column>
        <el-table-column prop="humidity" align="center" label="湿度" min-width="120"></el-table-column>
        <el-table-column prop="temperature" align="center" label="温度" min-width="120"></el-table-column>
        <el-table-column prop="co" align="center" label="一氧化碳" min-width="120"></el-table-column>
        <el-table-column prop="cO2" align="center" label="二氧化碳" min-width="120"></el-table-column>
        <el-table-column prop="o2" align="center" label="氧气" min-width="120"></el-table-column>
        <el-table-column prop="nO2" align="center" label="二氧化氮" min-width="120"></el-table-column>
        <el-table-column prop="noise" align="center" label="噪声" min-width="120"></el-table-column>
        <el-table-column prop="logTime" align="center" label="时间" min-width="170">
          <template slot-scope="scope">
            {{ parseTime(new Date(scope.row.logTime).getTime()) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-button icon="el-icon-delete" style="color: red;" size="mini" type="text" @click="handleRowDel(scope)">删除</el-button> 
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pagerData.pageIndex"
        :total="pagerData.count"
        :page-size="pagerData.pageSize"
        :page-sizes="[10, 20, 30, 40, 50]"
        style="text-align: right;"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import macarons from './components/macarons'
  import listMixin from '@/mixins/list'
  import { environmentTracking } from '@/api/api'
  import { parseTime } from '@/utils'

  export default {
    name: 'Environmental',
    components: { macarons },
    data() {
      let startTime = parseTime(new Date().getTime() - 8.64e7 * 3, '{y}-{m}-{d}') + ' 00:00:00'
      let endTime = parseTime(new Date().getTime(), '{y}-{m}-{d}') + ' 23:59:59'
      return {
        parseTime: parseTime,
        query: {
          logTime: [startTime, endTime]
        },
        minute: 1,
        seriesEcharts: [],
        // 列表数据
        tableData: [],
        multipleSelection: [],
        pagerData: {
          pageIndex: 1,
          pageSize: 10,
          count: 0,
        },
      }
    },
    mounted() {
      this.handleSearch()
    },
    methods: {
      async handleSearch() {
        this.tableLoading = true
        let query = { pageIndex: 1, pageSize: 1e8 }
        if (this.query.logTime) {
          query.search = [{
            key: 'logTime',
            value: this.query.logTime[0],
            operation: 4
          },{
            key: 'logTime',
            value: this.query.logTime[1],
            operation: 5
          }]
        }
        const res = await environmentTracking('post', query, false)
        this.seriesEcharts = res.data.items
        this.pagerData.count = res.data.count
        this.pagination()
        this.tableLoading = false
      },
      handleReset() {
        Object.assign(this.$data.query, this.$options.data().query)
        Object.assign(this.$data.pagerData, this.$options.data().pagerData)
        this.handleSearch()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      sizeChange(val) {
        this.pagerData.pageSize = val
        this.pagination()
      },
      currentChange(val) {
       this.pagerData.pageIndex = val
       this.pagination()
      },
      // 前端分页
      pagination() {
        let start = this.pagerData.pageIndex * this.pagerData.pageSize - this.pagerData.pageSize
        let end = this.pagerData.pageIndex * this.pagerData.pageSize
        this.tableData = this.seriesEcharts.slice(start, end)
      },
      handleRowDel({ row }) {
        let obj = { id: row.id, value: null }
        environmentTracking('delete', obj, true).then((res) => {
          this.handleSearch()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
      },
      batchDeletion() {
        
      },
    }
  }
</script>

<style lang="scss" scoped></style>
